<template>
  <div class="container">
    <div class="wrap workerForm">
      <form ref="workerForm">
        <div class="search">
          <icon type="search" class="search-img" size="13" color="#f5532d"></icon>
          <input type="text" name="username" v-model="workerForm.username" placeholder="请输手机号" placeholder-class="placeholder" />
        </div>
        <!-- <div class="search">
                    <icon type="search" class="search-img" size="13" color="#f5532d"></icon>
                    <input type="password" name="password" v-model="workerForm.code" placeholder="验证码" placeholder-class="placeholder" />
                </div> -->
        <div class="search">
          <icon type="search" class="search-img" size="13" color="#f5532d"></icon>
          <input type="password" name="password" v-model="workerForm.password" placeholder="请输入密码" placeholder-class="placeholder" />
        </div>
        <div></div>
        <button class="primary-btn" type="primary" @click="save">立即注册</button>
        <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="fnRegisterUser" plain="true">注册</button>
      </form>
    </div>
  </div>

</template>

<script>
import { workerApi } from '@/api/worker'
export default {
  data() {
    return {
      workerForm: {
        username: undefined,
        code: undefined,
        password: undefined
      }
    }
  },
  methods: {
    save() {
      console.log('--注册---')
      workerApi.save(this.workerForm.username, this.workerForm.password).then(res => {
        if (res.data != undefined) {
          wx.showToast({
            title: res.message,
            icon: 'success',
            duration: 1500
          })
          wx.reLaunch({
            url: '../edit/auth'
          })
        } else {
          wx.showToast({
            title: res.message,
            icon: 'none',
            duration: 1500
          })
        }
      })
    },
    fnRegisterUser(res) {
      if (res.target.iv && res.target.encryptedData) {
        console.log(res.target)
        wxregister(res.target, function(res) {
          //callback函数
        })
      } else {
        wx.showModal({
          title: '授权申请',
          content: '开启用户授权才能注册哦',
          success: function(res) {
            if (res.confirm) {
              getUserInfo()
            } else if (res.cancel) {
              //getUserInfo();
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="postcss" scoped>
.container {
  height: 100%;
  padding-top: 10px;
}
.search {
  background-color: #f2f2f2;
  height: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}

.search-img {
  margin: auto 0 auto 20rpx;
}

.search input {
  height: 100%;
  width: 600rpx;
  margin-left: 20px;
  font-size: 28rpx;
}

.placeholder {
  font-size: 14px;
  color: #d1d1d1;
  margin-left: 20rpx;
}
.primary-btn {
  background-color: #f5532d;
  margin-top: 20rpx;
}
</style>
